<template>
	<div class=" projectDialog">
		<el-dialog title="编辑" :visible.sync="dialogVisible" center>
			<el-form ref="form" :rules="rules" :model="data" label-width="100px" label-position="right">
				<el-form-item label="月份" prop="month">
					<el-select v-model="data.month" placeholder="请选择" :disabled="monthselect">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="计划投资额" prop="monthInvestment">
					<el-input  v-model.number="data.monthInvestment" style="width:360px"></el-input>
				</el-form-item>
				<el-form-item label="项目推进内容" prop="monthConetnt">
					<el-input v-model="data.monthConetnt" type="textarea" style="width:360px"></el-input>
				</el-form-item>
				<el-form-item style="margin-top: 30px">
					<el-button style="width:120px" type="primary" @click="OnSubmit">保存</el-button>
					<el-button style="width:120px" @click="Hiden">取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		components: {},
		mounted() {
			var monthoptions= [{
				value: 1,
				label: '一月'
			}, {
				value: 2,
				label: '二月'
			}, {
				value: 3,
				label: '三月'
			}, {
				value: 4,
				label: '四月'
			}, {
				value: 5,
				label: '五月'
			}, {
				value: 6,
				label: '六月'
			}, {
				value: 7,
				label: '七月'
			}, {
				value: 8,
				label: '八月'
			}, {
				value: 9,
				label: '九月'
			}, {
				value: 10,
				label: '十月'
			}, {
				value: 11,
				label: '十一月'
			}, {
				value: 12,
				label: '十二月'
			}];
			for(var i=0;i<monthoptions.length;i++ ){
				for(var j=0;j<this.months.length;j++){
					if(this.months[j]==monthoptions[i].value){
						monthoptions.splice(i,1);
					}
				}
			}
			this.options=monthoptions;
		},
		props: ['showDialogId', 'editData', 'months'],
		data() {
			var check = (rule, value, callback) => {
				if(!value) {
					callback()
				} else if(!Number.isInteger(value)) {
					callback(new Error('请输入数值'))
				} else {
					callback()
				}
			}
			return {
				dialogVisible: true,
				data: {},
				rules: {
					monthInvestment: [{
						validator: check,
						type: 'number',
						message: '计划投资必须为数字值'
					}],
				},
				initData: {},
				options: [],
				monthselect:false
			}
		},
		methods: {
			OnSubmit() {
				this.$refs['form'].validate((valid) => {
					if(valid) {
						let apiAction = this.data.id == null ? "addProjectPlan" : "editProjectPlan";
						this.data.pId = this.showDialogId;
						this.data.year = 2018;
						this.data.examineState = 1;
						this.ajax({
							url: 'tProjectPlan/' + apiAction,
							type: 'post',
							data: this.data,
							success: function(data) {
								this.Hiden();
								this.$parent.refresh();
							}
						});
					} else {
						return false;
					}
				});
			},
			Hiden() {
				this.dialogVisible = false;
			},
			ClearData() {
				this.$refs['form'].resetFields();
				this.data = JSON.parse(JSON.stringify(this.initData));
			}
		},
		watch: {
			dialogVisible(val) {
				this.$emit('update:showDialog', val)
			},
			editData: function(newVal, oldVal) {
				this.data = newVal;
			}
		},
	}
</script>
<style lang="less">
	.streetEdit .el-form-item__error {
		top: 35px;
		left: 100px;
	}
	
	.streetEdit .el-form-item {
		min-height: 50px;
		margin-bottom: 5px;
	}
</style>
<style scoped lang="less">
	.zui-noFloat .el-col {
		float: none;
		display: inline-block;
		margin-right: -4px;
		vertical-align: top;
	}
	
	.projectDialog .desc-input {
		width: 70%;
		float: left;
	}
	
	.el-dialog--small {
		min-width: 400px !important;
		min-height: 300px !important;
	}
</style>